<template>
  <div class="app-container">
    <el-card class="box-card">
      <el-table :data="tableData" style="width: 100%;margin-bottom:60px">
        <el-table-column align="center" prop="nickname" label="昵称"></el-table-column>
        <el-table-column align="center" prop="mobile" label="手机"></el-table-column>
        <el-table-column align="center" prop="add_time" label="下单时间"></el-table-column>
        <el-table-column align="center" prop="order_sn" label="订单编号"></el-table-column>
        <el-table-column align="center" prop="pay_type" label="交易类型">
          <template slot-scope="scope">
            <div v-if="scope.row.pay_type==1">微信支付</div>
            <div v-if="scope.row.pay_type==2">支付宝</div>
            <div v-if="scope.row.pay_type==3">余额</div>
            <div v-if="scope.row.pay_type==4">积分</div>
          </template>
        </el-table-column>

        <el-table-column v-if="show.box" align="center" prop="case_name" label="箱子名称">
          <template slot-scope="scope">
            <div>{{scope.row.case_name}}</div>
          </template>
        </el-table-column>
      </el-table>

      <el-table :data="tableData" style="width: 100%">
        <el-table-column align="center" prop="box_name" label="商品名称"></el-table-column>
        <el-table-column align="center" prop="name" label="盲盒图片">
          <template slot-scope="scope">
            <el-popover placement="top-start" title trigger="hover">
              <img :src="scope.row.box_img" alt style="max-width:150px" />
              <!-- <el-avatar shape="square" :size="150" fit="cover" :src="scope.row.img"></el-avatar> -->
              <el-avatar
                slot="reference"
                shape="square"
                :size="50"
                fit="scale-down"
                :src="scope.row.box_img"
              ></el-avatar>
              <!-- <img
                slot="reference"
                :src="scope.row.img"
                style="width: 60px;height: 60px"
              />-->
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="price" label="单价"></el-table-column>
        <el-table-column align="center" prop="num" label="数量"></el-table-column>
        <el-table-column v-if="show.coupon" align="center" prop="coupon_info.title" label="优惠券名称">
          <template slot-scope="scope">
            <div>{{scope.row.coupon_info.title}}</div>
          </template>
        </el-table-column>
        <el-table-column v-if="show.coupon" align="center" prop="coupon_info.money" label="优惠券金额">
          <template slot-scope="scope">
            <div>{{scope.row.coupon_info.money}}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="pay_sum_price" label="应付"></el-table-column>
        <el-table-column align="center" prop="pay_price" label="实付"></el-table-column>
      </el-table>

      <div class="title">抽中奖品</div>

      <el-table :data="goods" style="width: 100%">
        <el-table-column align="center" prop="id" label="ID"></el-table-column>
        <el-table-column align="center" prop="goods_name" label="奖品名称"></el-table-column>
        <el-table-column align="center" prop="rule_name" label="赏级名称"></el-table-column>
        <el-table-column align="center" prop="price" label="奖品价格"></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { blindBoxOrderInfo } from "@/api/order";
import { parseTime } from "@/utils/index";

export default {
  name: "BlindBoxOrderInfo",
  data() {
    return {
      tableData: [],
      goods: [],
      show: {
        coupon: false,
        box: false
      }
    };
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    async getInfo() {
      const res = await blindBoxOrderInfo({ id: this.$route.query.id });
      console.log(res);
      this.tableData.push(res.data);
      this.tableData.forEach(item => {
        item.add_time = parseTime(item.add_time, "{y}-{m}-{d} {h}:{i}:{s}");
      });
      this.goods = res.data.box_goods;
      this.show.coupon = res.data.coupon_id > 0;
      this.show.box = res.data.case_id > 0;
    }
  }
};
</script>

<style lang="scss" scoped>
.box-card {
  padding: 100px;
}
.title {
  margin: 40px 0;
  font-size: 30px;
  color: #b3b3b3;
}
</style>